<template>
    <div class="sdy-register">
        <SdyHeader title="啥都有 ~ 注册" back></SdyHeader>
        <van-steps class="steps" :active="active" finish-icon="good-job-o">
            <van-step>手机号验证</van-step>
            <van-step>验证码验证</van-step>
            <van-step>填写密码</van-step>
            <van-step>完成注册</van-step>
        </van-steps>
        <!-- 步骤1：验证手机号是否被注册过 -->
        <div v-if="(active === 0)" class="step0 step-item">
            <van-form class="login-from" @submit="checkPhoneHandler">
                <van-cell-group inset>
                    <van-field v-model="phone" name="手机号" label="手机号" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        验证
                    </van-button>
                </div>
            </van-form>
        </div>
        <!-- 步骤2：获取验证码并确定验证码正确性 -->
        <div v-if="(active === 1)" class="step1 step-item">
            <van-form class="login-from" @submit="checkCodeHandler">
                <van-cell-group inset>
                    <van-field v-model="code" center clearable label="短信验证码" placeholder="短信验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]">
                        <template #button>
                            <van-button :disabled="codeBtn" @click="sendCodeHandler" size="small"
                                type="primary">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        验证
                    </van-button>
                </div>
            </van-form>
        </div>
        <!-- 步骤3：验证俩次密码是否一致 -->
        <div v-if="(active === 2)" class="step2 step-item">
            <van-form class="login-from" @submit="registerHandler">
                <van-cell-group inset>
                    <van-field v-model="password" center clearable label="密码" placeholder="输入密码"
                        :rules="[{ required: true, message: '请输入密码' }]">
                    </van-field>
                    <van-field v-model="rpwd" center clearable label="重复密码" placeholder="再次输入密码"
                        :rules="[{ required: true, message: '请再次输入密码' }]">
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <div v-if="(active === 3)" class="step3 step-item">
            <van-icon class="finish" name="passed" />
            <router-link to="/login">
                <van-button type="success">去登录</van-button>
            </router-link>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 导入相关接口
import { checkPhoneApi, sendCodeApi, checkCodeApi, registerApi } from '@/api/users'
// 导入弹窗（当注册异常时，弹窗提示）
import { Toast, Notify } from 'vant'
// 准备变量表示步骤条顺序
const active = ref<number>(0)
//验证手机号
const phone = ref<string>('')
const checkPhoneHandler = async () => {
    // console.log('提交手机号验证');
    const res = await checkPhoneApi(phone.value)
    // console.log(res.code);

    // 判断返回结果，为200时可以继续下一步
    if (((res as unknown) as { code: string }).code === '200') {
        // 下一步调整active
        active.value++
        return
    }
    // 代码执行到这里，说明手机号不符合注册要求
    Toast({
        message: '手机号已被注册',
        icon: 'warning-o',
    });
}

//准备变量表示验证码
const code = ref<string>('')

//发送验证码按钮开关
const codeBtn = ref<boolean>(false)
//发送验证码
const sendCodeHandler = async () => {
    // console.log('发送验证码');
    codeBtn.value = true
    // 发送验证码到手机号
    const res = await sendCodeApi(phone.value)
    code.value = res.data
    // console.log(res);
    Notify({ type: 'success', message: '短信验证码为：' + res.data, duration: 5000, });
    // 一分钟后打开
    setInterval(() => {
        codeBtn.value = false
    }, 60000)
}

//验证码验证
const checkCodeHandler = async () => {
    // console.log('验证码验证');
    const res = await checkCodeApi(phone.value, code.value)
    // console.log(res);
    // 判断验证码是否正确
    if (((res as unknown) as { code: string }).code === '200') {
        // 下一步调整active
        active.value++
        return
    }
    // 代码执行到这里，说明手机号不符合注册要求
    Toast({
        message: '无效验证码',
        icon: 'warning-o',
    });
}

//采集密码
const password = ref<string>('')
const rpwd = ref<string>('')

//注册的方法
const registerHandler = async () => {
    // console.log('注册成功');
    // 验证俩次密码是否一致
    if (password.value !== rpwd.value) return Toast({
        message: '俩次密码输入不一致',
        icon: 'warning-o',
    });

    // 发送请求
    const res = await registerApi(phone.value, password.value)
    console.log(res);
    // 判断是否注册成功
    if (((res as unknown) as { code: string }).code === '200') {
        // 下一步调整active
        active.value++
        return
    }
    // 代码执行到这里，说明手机号不符合注册要求
    Toast({
        message: '注册失败，请重试！',
        icon: 'warning-o',
    });

}

</script>
<style scoped lang="scss">
.sdy-register {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    >.steps {
        width: 80%;
    }

    >.step-item {
        width: 80%;
        height: 200px;
        border: 1px solid #333;
        border-radius: 10px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .finish {
        font-size: 150px;
        color: rgb(7, 193, 96);
    }
}
</style>